<template>
  <div id="wrapper">
    <h1 class="headline">
      <span class="accent">演示</span> 通用设置
    </h1>
    <div class="description">
      这里一般用于软件首选参数设置，由于参数一般不会太多，采用了JsonDb存储，文件位于项目 /data/db_meta.json目录。
      <br>此处仅为演示，实际项目中，请根据实际情况进行设计。

    </div>
    
    <div class="form">     

    <a-form :model="formData" :label-col="{style:{width:'120px'}}" :wrapper-col="{span:17}">

    <a-form-item label="用户昵称" name="nickname" :rules="[{ required: true, message: '输入昵称', trigger: 'change' }]">
      <a-input v-model:value="formData.nickname" />
    </a-form-item>

    <a-form-item label="性别">
      <a-radio-group v-model:value="formData.gender">       
         <a-radio v-for="(item) in metaData.gender"
        :value="item.id" name="gender">{{ item.title }}</a-radio>
      </a-radio-group>
    </a-form-item>

    <a-form-item label="科目">
      <a-checkbox-group v-model:value="formData.subject">
        <a-checkbox v-for="item in metaData.subject"
        :key="item.id" :value="item.title"         
        >{{ item.title }}</a-checkbox>
      </a-checkbox-group>
    </a-form-item>

    <a-form-item label="开机启动">
      <a-switch v-model:checked="formData.startup" />
    </a-form-item>
   
    <a-form-item label="版本检测">
      <a-radio-group v-model:value="formData.check_weekly">       
         <a-radio v-for="(item) in metaData.check_weekly"
        :value="item.id" name="check_weekly">{{ item.title }}</a-radio>
      </a-radio-group>
    </a-form-item>


    <a-form-item :wrapper-col="{ span:0, offset:0 }">
      <a-button style="margin-left: 120px;" type="primary" @click="onSubmit">保存设置</a-button>
    </a-form-item>
  </a-form>

</div>


  </div>
</template>

<script setup>
import { ipcApiRoute } from "@/api/main";
import { ipc, isEE } from "@/utils/ipcRenderer";
import { reactive, toRaw, watch,onMounted } from 'vue';
import { message } from 'ant-design-vue';

//实际应该从数据库读取，此处仅为演示用例。
const formData= reactive({
  startup: true,
  check_weekly: 0,
  subject: "语文", 
  gender: 1,
  nickname: "朱小明"
});

//元数据样本，用于渲染表单控件的选项列表等。
const metaData = reactive({
  subject: [{"id":1,"title":"语文"},{"id":2,"title":"数学"}], 
  gender: [{"id":1,"title":"男"},{"id":2,"title":"女"}],
  check_weekly: [{"id":0,"title":"每次启动"}, 
  {"id":1,"title":"周"},{"id":2,"title":"月"},{"id":-1,"title":"从不"}],
});

// watch(formData, (newVal) => {
//   console.log("formData:", newVal);
// });
// watch(metaData, (newVal) => {
//   console.log("metaData:", newVal);
// });

const onSubmit = () => {
    message.error('演示程序，功能请自行完善!',3);  
};

onMounted(() => {
  buildMetaData();
});

// 读取元数据信息
function buildMetaData () {
  if (isEE) {
    ipc.invoke(ipcApiRoute.setting.getMetaData).then((r) => {
      r.result.forEach(item => {
        for (let key in item) {
          metaData[key] = item[key];
          console.log(`${key}`, item[key]);
        }       
      });
    });
  } else {
    console.log("开发模式无法启动IPC通信服务，元数据无法读取");
  }
};



</script>


<style lang="less" scoped>
.headline {
  font-size: 22px;
  line-height: 1.2;
  font-weight: bold;
  letter-spacing: -1.2px;
  margin: 10px auto 20px;
}

html:not(.dark) .accent {
  background: -webkit-linear-gradient(315deg, #42d392 25%, #647eff);
  background-clip: text;
  letter-spacing: 1.5px;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.description {
  line-height: 1.5;
  font-size: 14px;
  margin: 10px auto 15px;
}

.form{
  margin-top: 40px;
  margin-right: 20px;
}
</style>